<script>
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	console.log(safeAreaInsets)
	export default {
		data() {
			return {
				src: '../../static/image/下载.png'
			}
		}
	}
</script>

<template>
	<!-- 自定义导航栏 -->
	<view class="container">
		<!-- 上半部分 -->
		<view class="S-box">
			<view class="u-demo-block__content">
				<u-row justify="space-between" gutter="10">
					<u-col span="4">
						<view class="r-t">
							<!-- 头像 -->
							<u-avatar :src="src" shape="circle"></u-avatar>
						</view>
					</u-col>
					<u-col span="2">
						<view class="zi">
							公务车
						</view>
					</u-col>
					<u-col span="2">
						<view class="zi">
							班车
						</view>
					</u-col>
					<u-col span="4">
						<!-- gtb -->
						<view class="l-t" style="width: 100%;height: 100%;">
							<u-avatar src="../../static/image/u322.png" shape="circle"></u-avatar>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 下半部分 -->
		<view class="X-box">
			<view class="u-demo-block__content">
				<u-row justify="space-between" gutter="10">
					<u-col span="4" class="xxxx">
						<view>
							闲置中
							<view class="yuan">
								<text>65</text>
							</view>
						</view>
					</u-col>
					<u-col span="4" class="xxxx">
						<view>
							使用中
							<view class="yuan">
								<text>65</text>
							</view>
						</view>
					</u-col>
					<u-col span="4" class="xxxx">
						<view>
							维修中
							<view class="yuan">
								<text>65</text>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.page{
		padding-top: 236px;
	}
	.container {
		position: fixed;
		// height: 100%;
		background: linear-gradient(to bottom, rgb(233, 253, 252),rgb(245, 246, 250));
		top: 0;
		left: 0;
		right: 0;
		height: 236px;
		z-index: 1000;
	}

	.S-box {
		margin-top: 20px;
	}

	.S-box .u-col .r-t {
		margin-top: 8px;
		height: 100%;
		margin-left: 10px;
	}

	.S-box .u-col .l-t {
		margin-top: 8px;
		margin-left: 55px;
	}

	.S-box .u-col .zi {
		text-align: center;
	}

	.X-box {
		height: 150px;
		padding: 10px;
		margin: 5px;
		border: 1px solid rgb(207, 253, 242);
		border-radius: 50rpx;
		background: linear-gradient(to bottom, rgb(207, 252, 242), rgb(245, 246, 250));
	}

	.X-box .u-row {
		width: 95%;
		border-radius: 10rpx;
		// margin-left: 10px;
	}

	.X-box .u-col {
		height: 110px;
		border-radius: 20rpx;
		margin: 10px;
		margin-top: 10px;
		background-color: white;
	}

	.X-box .u-col view {
		margin-top: 5px;
		text-align: center;
		font-size: 14px;
		color: rgb(154, 154, 154);
	}

	.X-box .u-col:first-child .yuan {
		background-color: #fff;
	}

	.X-box .u-col view .yuan {
		margin: 0 auto;
		width: 70px;
		height: 72px;
		background: linear-gradient(to bottom, white, rgb(207, 252, 242));
		border: 2px solid #3498db;
		border-radius: 100px / 100px;
	}

	.X-box .u-col view .yuan text {
		line-height: 70px;
		font-size: 30px;
	}
</style>